import React, {useEffect, useState} from 'react';

export function TestUseEffect() {
    const [count, setCount] = useState(0);
    const [message, setMessage] = useState('');

    // 1. 基本用法 - 每次渲染后执行
    useEffect(() => {
        console.log('每次渲染都会执行');
    });

    // 2. 带空依赖数组 - 只在组件挂载时执行一次
    useEffect(() => {
        console.log('只在组件挂载时执行');
        return () => console.log('组件卸载时执行清理');
    }, []);

    // 3. 带依赖项 - 当count变化时执行
    useEffect(() => {
        console.log('count变化时执行:', count);
        setMessage(`当前计数: ${count}`);
    }, [count]);

    return (
        <div>
            <h2>useEffect演示</h2>
            <p>{message}</p>
            <button onClick={() => setCount(c => c + 1)}>
                增加计数: {count}
            </button>
            <p>打开控制台查看useEffect执行情况</p>
        </div>
    );
}